<template>
  <div class="detail">
    <div class="left">
      <li>当前观看人数：{{ obj.people }}人</li>
      <li>当前关注人数：{{ obj.num }}人</li>
      <li>当前点赞人数：{{ obj.goods }}人</li>
      <li>当前下单人数：{{ obj.sale }}人</li>
    </div>
    <div class="right">
      <dl>
        <dt>
          <h2>{{ obj.title }}</h2>
          <img :src="obj.image" alt="" />
        </dt>
        <dd>
          <button class="back" @click="$router.go(-1)">返回</button>
          <button class="backGo" @click="$router.go(-1)">强制关闭</button>
        </dd>
      </dl>
      <iframe
        src="//player.bilibili.com/player.html?aid=589945718&bvid=BV1Uq4y1S7fT&cid=391944969&page=1"
        scrolling="no"
        border="0"
        frameborder="no"
        framespacing="0"
        allowfullscreen="true"
      >
      </iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {},
    };
  },
  created() {
    const { id } = this.$route.params;
    this.$api.detailId(id).then((res) => {
      console.log(res, "detail");
      this.obj = res.data;
    });
  },
};
</script>

<style lang='scss' scoped>
.detail {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  .left {
    width: 20%;
    height: 100%;
    margin-left: 35px;
    li {
      width: 100%;
      height: 55px;
      line-height: 55px;
      text-align: center;
      color: #e6f1f5;
      margin: 10px 0;
    }
  }
  .right {
    width: 80%;
    height: 100%;
    dl {
      width: 100%;
      height: 600px;
      dt {
        height: 550px;
        text-align: center;
        color: #fff;
        h2{
            height: 35px;
            line-height: 35px;
            font-size: 18px;
        }
        img {
          width: 650px;
          height: 450px;
        }
      }
      dd {
        display: flex;
        justify-content: space-around;
        button {
          width: 120px;
          height: 40px;
          color: #fff;
          text-align: center;
        }
        .back {
          background-color: #f00;
        }
        .backGo {
          border:2px solid #f00;
          background-color: slategray;
        }
      }
    }
  }
}
</style>